<template>
  <div>
    <div class="top">
			<div class="pic"> 
				<img src="../assets/login/defualt_user_head.png">
			</div>
		</div>
		<!--<div class="tab">
			<div @click="login()">
				登录
			</div>
			<div class="activ">
				注册
			</div>
		</div>-->
		 <div class="list">
			 <!--<div class="boxt">
				<div class="infos">
					<span>
						<img src="../assets/login/wode.png" alt="">
						<span>用户名</span>
					</span>
					<input type="text" v-model="form.name" placeholder="请输入真实姓名">
				</div>
			</div>-->
			  <div class="boxt">
          <div class="infos">
            <span>
              <img src="../assets/login/wode.png" alt="">
              <span>手机号码</span>
            </span>
            <input type="text" v-model="form.phone" placeholder="请输入手机号码">
          </div>
        </div>
			<div class="boxt">
				<div class="infos">
					<b>
						<img src="../assets/login/duanxing.png" alt="">
					</b>
					<input type="text" v-model="form.num" placeholder="请输入短信验证码">
					<yd-sendcode slot="right" 
												v-model="start1" 
												@click.native="sendCode1" 
												type="danger"
					></yd-sendcode>
				</div>
			</div> 
			<div class="boxt" >
				<div class="infos">
					<span>
						<img src="../assets/login/yaoshi.png" alt="">
						<span>登录密码</span>
					</span>
					<input type="password" v-model="form.password" placeholder="请输入登录密码">
				</div>
			</div> 
			<div class="boxt" >
				<div class="infos">
					<span>
						<img src="../assets/login/yaoshi.png" alt="">
						<span>确认密码</span>
					</span>
					<input type="password" v-model="form.okpassword"  placeholder="请确认登录密码">
				</div>
			</div> 
			<!-- <div class="mimax">
				<div> <yd-checkbox color="#ff485c"  v-model="checked">已经阅读并同意</yd-checkbox> <span @click="xiyi()">	《鸿包惠用户协议》</span></div> 
				<div></div> 
			</div> -->
			<div class="denglu" @click="zhuce()">绑定手机号</div>
			<div style="height:1rem;"></div> 
		</div>

	 <!-- 协议 -->
	 <div class="bbxo">
	 <yd-popup v-model="show1" position="center" width="90%">
				<div style="max-height:500px;padding:.3rem; border-radius:5px;">
						<div class="xyi">注册协议</div>
						<p v-html="list"></p>
						<div style="height:.1rem;"></div>
						<div class="iok" @click="show1 = false">确定</div>
				</div>
		</yd-popup>
		</div>
  </div>
</template>

<script>
import Vue from "vue";
import {SendCode} from 'vue-ydui/dist/lib.rem/sendcode';
/* 使用px：import {SendCode} from 'vue-ydui/dist/lib.px/sendcode'; */

Vue.component(SendCode.name, SendCode);
export default {
  name: 'inform',
  data () {
    return {
		 start1: false,
		 checked:true,
		 show1:false,
		 list:[],
		 form:{
				name:'',
				phone:'', 
				password:'',
				num:'',
				okpassword:'',
				dddd:''
			}
    }
  },
  methods:{
		//登录跳转
		login:function(){
      this.$router.push("/"); 
		},
		//获取验证码
    sendCode1() { 
			 	let self = this;
        let data = self.form;
        let reg_str = /^1\d{10}$/;
        if(!reg_str.test(data.phone)){
         this.$dialog.notify({
              mes: '请输入正确手机号码！',
              timeout: 3000
          });
         return 
        }
						// this.$dialog.loading.open('发送中...'); 
						// self.$dialog.loading.close(); 

            let url = "/api/login/send";
            self.httpPost(url,{phone:data.phone,type:8},function(res) {
                if (res.code == 200) {
									 self.dddd = res.data;
									 console.log(111, self.dddd)
                     setTimeout(() => { 
                        self.start1 = true;
                        self.$dialog.toast({
                            mes: res.msg,
                            icon: 'success',
                            timeout: 1500
                        }); 
                    }, 1000);
                } 
            }); 
		},
		//协议弹出
		xiyi: function(i,b) {
				let self = this; 
				let url = "/api/system";
				this.show1 = true;
				self.httpGet(url,function(res) {
				if (res.code == 200) {  
					 self.list=res.data[0].PDU
				} 
      })
		},
		//立即注册
		 zhuce:function(){ 
				let self = this;
				if(this.type==1&&this.up_id){ 
					console.log(123)
					let data = self.form;
					let reg_str = /^1\d{10}$/;
					if(!reg_str.test(data.phone)){
					this.$dialog.notify({
								mes: '请输入正确手机号码！',
								timeout: 3000
						});
					return 
					}
					if(this.dddd!=this.form.num){
						self.$dialog.notify({
								mes: '输入验证码不正确',
								timeout: 3000
						});
						return
					}
					if(!data.password){
						self.$dialog.notify({
								mes: '请输入密码',
								timeout: 3000
						});
						return
					}
					if(data.password.length<6){
						self.$dialog.notify({
								mes: '密码长度不够',
								timeout: 3000
						});
						return
					}
					if(!data.okpassword){
						self.$dialog.notify({
								mes: '请重复密码',
								timeout: 3000
						});
						return
					}
					if(data.okpassword!=data.password){
						self.$dialog.notify({
								mes: '两次密码不一致',
								timeout: 3000
						});
						return
					}
							let url = "/api/login/wxphone_up";
							self.httpPost(url,{phone:data.phone,openid:self.openid,pwd:data.password,up_id:this.up_id},function(res) {
								if (res.code === 200) {
										localStorage.setItem("mytoken", res.data.token);
										localStorage.setItem("myid", res.data.id); 
										setTimeout(() => {
										self.$router.push("/mine"); 
										}, 1000);
									}else{
										alert(res.msg)
									}
							}); 
				}else{
					let data = self.form;
					let reg_str = /^1\d{10}$/;
					if(!reg_str.test(data.phone)){
					this.$dialog.notify({
								mes: '请输入正确手机号码！',
								timeout: 3000
						});
					return 
					}
					if(this.dddd!=this.form.num){
						self.$dialog.notify({
								mes: '输入验证码不正确',
								timeout: 3000
						});
						return
					}
					if(!data.password){
						self.$dialog.notify({
								mes: '请输入密码',
								timeout: 3000
						});
						return
					}
					if(data.password.length<6){
						self.$dialog.notify({
								mes: '密码长度不够',
								timeout: 3000
						});
						return
					}
					if(!data.okpassword){
						self.$dialog.notify({
								mes: '请重复密码',
								timeout: 3000
						});
						return
					}
					if(data.okpassword!=data.password){
						self.$dialog.notify({
								mes: '两次密码不一致',
								timeout: 3000
						});
						return
					}
							// self.$dialog.loading.open('注册中...'); 
							let url = "/api/login/wxphone";
							self.httpPost(url,{phone:data.phone,openid:self.openid,pwd:data.password},function(res) {
								if (res.code === 200) {
										localStorage.setItem("mytoken", res.data.token);
										localStorage.setItem("myid", res.data.id); 
										setTimeout(() => {
										self.$router.push("/mine"); 
										}, 1000);
									}else{
										alert(res.msg)
									}
							}); 
				}
						


      }
	},
	mounted(){
				this.token = localStorage.getItem('mytoken');
				this.openid = localStorage.getItem('openid');
				this.type = localStorage.getItem('type');
				this.up_id = localStorage.getItem('up_id');
				this.status = localStorage.getItem('status');
	},
	created(){
		
	}
}
</script>


<style scoped>
.top{
	width:100%;
	height:3.22rem;
	background: #b63554;
	display: flex;
	justify-content: center;
	align-items: center;
}
.top .pic{
	width:1.28rem;
	height:1.28rem;
	border-radius: 50%;
}
.top .pic img{
	width:100%;
	height:100%;
	border-radius: 50%;
}
.tab{
	width:100%;
	height:1rem;
	background: #ff485c;
	display: flex;
}
.tab>div{
	width:50%;
	text-align: center;
	color:#FFF;
	font-size: .32rem;
	line-height: 1rem;
}
.activ{
	position: relative;
}
.activ::after{
	display: block;
	content: "";
	clear: both;
	position: absolute;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid transparent;
	border-bottom: 7px solid #FFF;
	bottom:0;
	left:50%;
	margin-left: -7.2px;
}
.list {
  width: 100%;
  padding: 0 0.3rem;
  background: #fff;
}
.list .boxt {
  width: 100%;
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
}
.list .boxt .info {
  width: 100%;
  height: 100%;
  line-height: 1.4rem;
  border-bottom: 1px solid #eee;
}

.list .boxt .info span {
  font-size: 0.28rem;
  color: #707070;
	/* width: 1.2rem; */
	display: inline-block;
}
.boxt span {
  font-size: 0.28rem;
  color: #333;
}
.info>span{
	display: flex;
	align-items: center;
}
 
 
.infos{
	padding-top: .15rem;
	border-bottom: 1px solid #eee;
	width: 100%;
	display: flex;
	height: 1rem;
	align-items: center;
}
.infos input{
	height: .7rem;
	flex: 1;
	border: none;
	color: #333;
	font-family: "微软雅黑";
	font-size: .3rem;
}
.infos span{
	display: flex;
	align-items: center;
	color: #333;
	width: 1.9rem;
	font-size: .31rem;
}
.infos img{
	width: .36rem;
	margin-right: .15rem;
	position: relative;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9e9e9e;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #9e9e9e;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9e9e9e;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9e9e9e;
}
.mimax{
	font-size: .25rem;
	height: 1rem;
	align-items: center;
	color: #666;
	display: flex;
	justify-content: space-between;
}
.denglu{
  margin-top: 40px;
	height: .8rem;
	border-radius: 25px;
	text-align: center;
	background: #ff485c;
	font-size: .35rem;
	color: #fff;
	line-height: .8rem;
}
.ddd{
	margin-top: 1rem;
}
	.iok{
			width: 100%;
			line-height: .8rem;
			color: #fff;
			text-align: center;
			font-size: .4rem;
			background-color: #ff485c;
	}
	.xyi{
		text-align: center;
		line-height: .8rem;
		color: #333;
		font-size: .32rem;
	}
</style>
<style>
	.bbxo .yd-popup-content{
		background-color:#F5F5F5!important
	}
</style>
